<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		.navbar{
			width: 960px;
			background: #6495ED;
			margin: 0 auto;
		}
		.nav{
			display: flex;
			justify-content: space-around;
			list-style: none;
		}
		.nav li{
			width: 7.5rem;
			text-align: center;
			height: 100px;
			line-height: 100px;
		}
		.nav a{
			color: #fff;
			text-decoration: none;
			transition: 0.5s;
		}
		.nav a:hover{
			color: #191970;
		}
		h2{
			margin: 10px;
		}
		.content{
			margin: 0px auto;
			width: 960px;
		}
		#infos{
			width: 960px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		.info{
			width: 300px;
			margin-bottom: 20px;
		}
		.info img{
			display: block;
			width: 300px;
			height: 220px;
		}
		.info figcaption{
			margin-top: 5px;
			text-align: center;
		}
	</style>
</head>
<body>
	<nav class="navbar">
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">首页</a></li>
		</ul>
	</nav>
	<div class="content">
		<h2>热门景点</h2>
		<div id="infos">
			<figure class="info">
				<img src="./images/tour1.jpg" alt="热门图片">
				<figcaption>巴厘岛</figcaption>
			</figure>
			<figure class="info">
				<img src="./images/tour1.jpg" alt="热门图片">
				<figcaption>巴厘岛</figcaption>
			</figure>
			<figure class="info">
				<img src="./images/tour1.jpg" alt="热门图片">
				<figcaption>巴厘岛</figcaption>
			</figure>
			<figure class="info">
				<img src="./images/tour1.jpg" alt="热门图片">
				<figcaption>巴厘岛</figcaption>
			</figure>
			<figure class="info">
				<img src="./images/tour1.jpg" alt="热门图片">
				<figcaption>巴厘岛</figcaption>
			</figure>
			<figure class="info">
				<img src="./images/tour1.jpg" alt="热门图片">
				<figcaption>巴厘岛</figcaption>
			</figure>
		</div>
	</div>
	
</body>
</html>